import { Suspense } from 'react';
import { BrowserRouter, useRoutes, useLocation } from 'react-router-dom';
import { Spin } from 'antd';
import routes from '@/router/routes';
import '@/styles/index.less';
import MainLayout from '@/components/Layout/MainLayout';
import type { RouterTypes } from './router/routes';

function AppRoutes() {
  const element = useRoutes(routes);
  return element;
}

function RootContainer() {
  const location = useLocation();
  const findRoute = routes.find(route => route.path === location.pathname) || {} as RouterTypes;
  const { menuRender = true } = findRoute;
  if (!menuRender) {
    return <AppRoutes />
  }

  return (
    <MainLayout>
      <AppRoutes />
    </MainLayout>
  );
}

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<Spin size="large" className="global-spin" />}>
        <RootContainer />
      </Suspense>
    </BrowserRouter>    
  );
}

export default App;